<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      title="分配用戶"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <div>
        <vxe-table
          ref="mytable"
          :data="tableData"
          style="width: 100%; margin-top: 10px; margin-bottom: 10px"
          border
          highlight-current-row
          @checkbox-change="handleSelectionChange"
          @checkbox-all="handleAllSelectChang"
          v-model="selectRow"
        >
          <vxe-column type="checkbox" width="40" />
          <vxe-column field="userName" title="用户名称"></vxe-column>
          <vxe-column field="userNo" title="用户账号"></vxe-column>
        </vxe-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="userRoleAddSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  <script>
import {
  getUserRoleSearch,
  getUserRoleSaveBatch,
  getUserList,
} from "@/api/datacentersg/achives/documentApi";
import store from "@/store";
export default {
  name: "userRolePopTwo",
  components: {},
  props: [],
  data: () => ({
    dialogVisible: false,
    data: [],
    currentUser: null,
    personList: [],
    multipleSelection: [],
    visible: false,
    dataForm: {
      userName: "",
      userNo: "",
    },
    row: "",
    visibleInner: false,
    tableData: [],
    selectRow: [],
  }),
  computed: {},
  mounted() {},
  methods: {
    initData(row, list) {
      this.dialogVisible = true;
      this.row = row;
      this.personList = list;
      this.$nextTick(() => {
        this.$refs.mytable.clearCheckboxRow();
      });
      this.getUserRoleList();
    },
    async getUserRoleList() {
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        data: {
          roleId: this.row.roleId,
        },
      };
      const result = await getUserRoleSearch(params);
      if (result.result) {
        this.selectRow = result.resultdata.data;//但是这个里面是保存之后存数据的地方 要回显的还是this.tableData
        // this.compareAndCheckCheckbox();
        this.getUserList();
      }
    },
    async getUserList() {
      const params = {
        data: {
          currentPage: 1,
          pageSize: 9999,
        },
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
      };
      const res = await getUserList(params);
      if (res.result) {
        this.tableData = res.resultdata.data;
        // this.compareAndCheckCheckbox();
        this.$nextTick(() => {
          this.compareAndCheckCheckbox()
        })
      }
    },
    compareAndCheckCheckbox() {
      this.$refs.mytable.clearCheckboxRow(); // 清空已勾选的复选框
      this.tableData.forEach((tableItem) => {
        this.selectRow.forEach((selectItem) => {
          if (tableItem.userId === selectItem.userId) {
            this.$refs.mytable.setCheckboxRow(tableItem, true); // 根据具体的行索引来勾选复选框
          }
        });
      });
    },
    handleSelectionChange(personRow) {
      this.personList = personRow.records;
      console.log(this.personList, "personList");
    },
    handleAllSelectChang({ checked, records }) {
      this.personList = records;
      console.log(this.multipleSelection, "multipleSelection");
    },
    handleClose() {
      this.dialogVisible = false;
    },

    userRoleAddSubmit() {
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        type: "role",
        data: [],
      };
      let allList = [...this.personList];
      allList.forEach((item) => {
        params.data.push({
          roleId: this.row.roleId,
          userId: item.userId,
          userName: item.userName,
          userNo: item.userNo,
          roleName: null,
        });
      });
      if (allList.length == 0) {
        this.$message({
          message: "请先勾选用户",
          type: "warning",
        });
      } else {
        getUserRoleSaveBatch(params).then((result) => {
          if (result.result) {
            this.$message({
              message: "操作成功",
              type: "success",
            });
            this.dialogVisible = false;
            this.$emit("onChange", this.personList);
            this.getUserRoleList();
            this.getUserList();
          }
        });
      }
    },
  },
};
</script>
  